<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho Big Clusters</h1>
    <div id="container"></div>
    <script src="../engine/dist/ElGrapho.js"></script>
    <script>
const NUM_NODES = 10000;

let model = {
  nodes: [],
  edges: []
};

for (let n=0; n<NUM_NODES; n++) {
  let group = Math.floor(Math.random() * 5);
  let fromIndex = Math.floor(Math.random() * NUM_NODES);
  let toIndex = Math.floor(Math.random() * (NUM_NODES-1));

  if (group === 0 && Math.random() > 0.5) {
    group = 1;
  }

  model.nodes.push({
    group: group
  });

  model.edges.push({
    from: fromIndex,
    to: toIndex
  });
}

let graph = new ElGrapho({
  container: document.getElementById('container'),
  model: ElGrapho.layouts.Cluster(model),
  width: 500,
  height: 500,
  nodeSize: 0.1,
  edgeSize: 0.1,
  debug: true,
  darkMode: true,
  glowBlend: 1,
  nodeOutline: false
});

    </script>
  </body>
</html>